<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <!-- 一般开发中都是用单文件组件，非单文件组件用的少 -->

        <!-- <h2>名称：{{schoolName}}</h2>
        <h2>地址：{{address}}</h2>
        <hr>
        <h2>姓名：{{studentName}}</h2>
        <h2>年龄：{{age}}</h2> -->

        <!-- 页面中使用自定义的组件 -->
        <school></school>
        <hr>


    </div>


</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    const student = Vue.extend({
        template: `
            <div>
                <h2>姓名：{{studentName}}</h2>
                <h2>年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: 'aBiu',
                age: 18,
            }
        }
    })
    const school = Vue.extend({
        // 因为下面嵌套了student，所以页面中是这样使用的
        template: `
            <div>
                <h2>名称：{{schoolName}}</h2>
                <h2>地址：{{address}}</h2>
                <student></student>
            </div>
        `,
        data() {
            return {
                schoolName: '上海',
                address: '浦东新区',
            }
        },
        components: {
            student     // school 注册了student，student要先定义好，不然报错找不到
        }
    })



    const vm = new Vue({
        el: "#root",
        data: {
        },

        components: {
            school,     // 只引入了school
        }
    })
</script>

</html>